import React, { useState, useEffect } from 'react';
import {
  Button,
  Cascader,
  DatePicker,
  Chekcbox,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  TreeSelect,
} from 'antd';
type propsTS={
  onFinish?:Function,
  title:string,
  itemobj?:any
}
const Myform = (props:propsTS) => {
  //编辑回显数据
  const [form] = Form.useForm();
  useEffect(() => {
    if (props.title == '编辑') {
      form.setFieldsValue(props.itemobj)
    }
  }, [])
  const onFinish = (values:any) => {
    props.onFinish?.(values)
  }
  return (
    <Form
      form={form}
      onFinish={onFinish}
      style={{ maxWidth: 600 }}
    >
      <Form.Item label="用户名" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="role" name="role">
        <Select>
          {
            props.data.map(item => {
              return <Select.Option value={item}>{item == 1 ? '超级管理员' : '开发者'}</Select.Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item label="简介" name="desc">
        <Input.TextArea />
      </Form.Item>
      <Form.Item label="标签" name="tags">
        <Radio.Group
          options={[
            { value: 1, label: '前端工程师' },
            { value: 2, label: '后端工程师' },
            { value: 3, label: '全栈工程师' },
          ]}
        />
      </Form.Item>
      <Form.Item >
        <Button htmlType="submit">确定</Button>
      </Form.Item>
    </Form>
  );
};

export default Myform;